import React, { Component } from 'react'
import { SearchBar } from 'antd-mobile'
import "./index.scss";
import axios from 'axios';
import debounce from 'lodash/debounce';
import del from './img/del.png'
export default class SearchCom extends Component {
    constructor() {
        super();
        this.state = {
            searchTxt: "",
            searchList: [],
            HotList: [],
            keywords: '',
            data: []
        }
        this.getSearchData = debounce(this.getSearchData, 1000);
    }
    changeTxt = (value) => {
        console.log(value);
        this.setState({
            searchTxt: value
        })
        //获取数据
        this.getSearchData((value));
    }

    getSearchData = (value) => {
        console.log(value);
        // localStorage.setItem('key', JSON.stringify(value));
        axios.post(
            'https://srv.hotkidceo.com/appapi/root-ceo-commodity/esApi/suggestion', { "key": value, "isWholeSale": 0, "channelId": "C06022632001" }
        ).then(res => {
            console.log(res);
            let data = res.data.data.suggestionList;
            if (data.length > 0) {
                this.setState({
                    searchList: data,
                })
            }

        })
    }
    async componentDidMount() {
        await axios.post('https://srv.hotkidceo.com/appapi/root-ceo-commodity/commodityApi/searchWords', { isWholeSale: 0, channelId: null })
            .then(res => {
                let HotList = res.data.data.keywords
                console.log(HotList);
                this.setState({
                    HotList: HotList,
                    data: sessionStorage.getItem("address") == null
                        ? []
                        : JSON.parse(sessionStorage.getItem("address"))
                })
            })
        // console.log(data);
    }
    goList = (value) => {
        console.log(value);
        this.props.history.push('/list/' + value);
        const result =
            sessionStorage.getItem("address") == null
                ? []
                : JSON.parse(sessionStorage.getItem("address"));
        console.log(result);
        var res = value;
        result.unshift(res);
        //去重，但是返回的是对象----new Set
        let newarr = new Set(result)
        console.log(this.addArr);
        //获取key为address的json对象的值，Array.form转数组
        sessionStorage.setItem("address", JSON.stringify(Array.from(newarr)));

    }

    render() {
        let { searchTxt, searchList, HotList, data } = this.state;
        console.log(data);
        return (
            <div className="search_con">
                {/* 搜索框 */}
                <div className='search_inp'>
                    <SearchBar placeholder='请输入内容' showCancelButton={() => true} value={searchTxt.trim()} onChange={this.changeTxt} onCancel={() => {
                        this.props.history.go(-1)
                    }} />
                </div>
                {
                    searchList.length !== 0 ? <ul style={{ marginTop: '10px' }}>
                        {
                            searchList.map((item, index) => <li key={index} onClick={() => { this.goList(item) }}
                                // dangerouslySetInnerHTML={{ __html: this.textHightLight('teststring', `${this.state.value}`) }}
                                className='sea_list'>
                                {item}
                            </li>)
                        }
                    </ul>
                        :
                        <div>
                            <div style={{ marginTop: '10px', marginLeft: '10px' }}>
                                <h1 style={{ color: '#343434', fontSize: '15px', fontWeight: '700' }}>热门搜索</h1>

                                <ul className='Hot_list'>
                                    {
                                        HotList.map((item, index) =>


                                            <li key={index} onClick={() => {
                                                this.goList(item.name)
                                            }}>
                                                {
                                                    item.isHighlight === '1' ?
                                                        <p className='Hot_ietm'>{item.name}</p>
                                                        :
                                                        <p className='Hot_ietm_ac'>{item.name}</p>

                                                }
                                            </li>)
                                    }
                                </ul>
                            </div>
                            <div>
                                {
                                    data.length > 0 ?
                                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                            <h1 style={{ color: '#343434', fontSize: '15px', fontWeight: '700', marginTop: '10px', marginLeft: '10px' }}>搜索历史</h1>
                                            <img src={del} alt={del} style={{
                                                width: '15px',
                                                height: '15px',
                                                marginRight: '10px',
                                                marginTop: '10px'
                                            }}
                                                onClick={() => {
                                                    sessionStorage.clear();
                                                }}
                                            />
                                        </div>
                                        : ''
                                }

                                <ul className='Hot_list'>
                                    {
                                        data.length > 0 ?
                                            data.map((item, index) =>
                                                <li key={index} className='Hot_ietm'>
                                                    {
                                                        <p >{item}</p>
                                                    }
                                                </li>)
                                            : ''
                                    }
                                    {/* <li className='Hot_ietm'>{data}</li> */}

                                </ul>
                                {/* 搜索历史需要保存在 localStorage中 */}
                            </div>

                        </div>
                }



            </div>
        )
    }
}
